<template>
	<view class="container2">
		<view class="info-box primary-bg">
			<view>
				<view open-type="getUserInfo" class="avatar">
					<open-data type='userAvatarUrl' class="userinfo" mode="cover"></open-data>
				</view>
			</view>
			<view>
				<view class="user-info">
					<view class="username text-white">{{userInfo.userName!=null?userInfo.userName:'未登录'}}<view v-if="userInfo.userName!=null">{{userInfo.reserved1=='1'?'(员工)':'(客户)'}}</view></view>
					<view class="tips-txt" open-type="getPhoneNumber" type="primary">{{userInfo.phone!=null?userInfo.phone:''}}</view>
				</view>
			</view>
		</view>

		<view v-if="!showType" style="padding: 20px;width: 400rpx;">
			<button class="login-button" style="background: #00cc9c;color: #ffffff;" open-type="getPhoneNumber" type="primary" @getphonenumber="getPhoneNumber">授权登录</button>
		</view>



		<view v-if="userInfo.reserved1 == '0'" style="padding: 20px;">
			<view class="container2">
				<!-- 第一行卡片 -->
				<view class="card-row">
					<view class="card">
						<button class="login-button" style="background: #979797;color: #ffffff;" @click="caremaShow('01')">扫码</button>
					</view>
				</view>
			</view>
		</view>

		<view v-if="userInfo.reserved1 == '1'" style="padding: 20px;">
			<view class="container2">
				<!-- 第一行卡片 -->
				<view class="card-row">
					<view class="card">
						<button class="login-button" style="background: #e02b2b;color: #ffffff;" @click="caremaShow('01')">一类</button>
						<!--<button class="login-button" style="background: #e02b2b" open-type="getPhoneNumber" type="primary" data-extra="零售" @getphonenumber="getPhoneNumber">零售</button>-->
					</view>
					<view class="card">
						<button class="login-button" style="background: #1164e0;color: #ffffff;" @click="caremaShow('02')">二类</button>
						<!--<button class="login-button" style="background: #1164e0" open-type="getPhoneNumber" type="primary" data-extra="批发" @getphonenumber="getPhoneNumber">批发</button>-->
					</view>
					<view class="card">
						<button class="login-button" style="background: #00cc9c;color: #ffffff;" @click="caremaShow('03')">三类</button>
						<!--<button class="login-button" style="background: #00cc9c" open-type="getPhoneNumber" type="primary" data-extra="订货" @getphonenumber="getPhoneNumber">订货</button>-->
					</view>
				</view>

				<!-- 第二行卡片 -->
				<view class="card-row">
					<view class="card">
						<button class="login-button" style="background: #4a4848;color: #ffffff;" @click="caremaShow('04')">四类</button>
						<!--<button class="login-button" style="background: #4a4848" open-type="getPhoneNumber" type="primary" data-extra="工装" @getphonenumber="getPhoneNumber">工装</button>-->
					</view>
					<view class="card">
						<button class="login-button" style="background: #e48902;color: #ffffff;" @click="caremaShow('05')">五类</button>
						<!--<button class="login-button" style="background: #e48902" open-type="getPhoneNumber" type="primary" data-extra="工程" @getphonenumber="getPhoneNumber">工程</button>-->
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		onShareAppMessage() {
			return {
				title: '赐丰订单',
				path: '/pages/index/index',
				imageUrl: '/static/ewm.jpg'
			}
		},
		data() {
			return {
				userInfo: null,
				showType: false,
			}
		},
		onShow() {
			var that = this
			var userInfo = uni.getStorageSync('userInfo');
			if (userInfo && userInfo.value) {
				// 判断缓存是否过期
				var now = new Date().getTime();
				if (now < userInfo.expire) {
					that.userInfo = userInfo.value;
					that.showType = true;
				} else {
					// 缓存过期，清空本地缓存
					that.userInfo = null;
					that.showType = false;
					uni.removeStorageSync('userInfo');
				}
			}else{
				// 缓存过期，清空本地缓存
				that.userInfo = null;
				that.showType = false;
			}
		},
		methods: {
			caremaShow(type) {
				var that = this;
				if (that.userInfo) {
					that.userInfo.reserved3 = type;
					uni.removeStorageSync('userInfo');
					var now = new Date().getTime();
					var expire = now + 30 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
					uni.setStorageSync('userInfo', {
						value: that.userInfo,
						expire: expire
					});
					uni.navigateTo({
						url: '/pages/carema/carema',
						animationType: 'pop-in',
						animationDuration: 300
					})
				} else {
					uni.$u.toast('请先授权!')
				}
			},
			getPhoneNumber(e) {
				const extraValue = e.currentTarget.dataset.extra;
				// 在这里可以使用 extraValue 进行后续逻辑处理
				console.log(extraValue);
				var that = this
				let phoneCode = e.detail.code
				if (!e.detail.code) {
					uni.showModal({
						title: '授权失败',
						content: '您已拒绝获取绑定手机号登录授权，可以使用其他手机号验证登录',
						cancelText: '知道了',
						showCancel: false, // 是否显示取消按钮，默认为 true
						confirmText: '知道了',
						confirmColor: '#3C9CFFFF',
						success: res => {
							if (res.confirm) {
								uni.removeStorageSync('userInfo');
								that.userInfo = null;
								that.showType = false;
								// uni.$u.route('/pages/login/mobile')
							} else if (res.cancel) {
								uni.removeStorageSync('userInfo');
								that.userInfo = null;
								that.showType = false;
								//console.log('用户点击取消')
							}
						}
					})
				} else {
					uni.getUserInfo({
						provider: 'weixin',
						success: function (infoRes) {
							that.userInfo = infoRes.userInfo;
							uni.login({
								provider: 'weixin',
								success: res => {
									uni.request({
										data: {
											userName: that.userInfo.nickName,
											reserved4: that.userInfo.avatarUrl,
											phoneCode: phoneCode,
											loginCode: res.code
										},
										method: 'POST',
										url: that.bash + '/fApi/wxuser/wxlogin',
										success: res => {
											if (res.data.code == 200) {
												uni.$u.toast('获取成功')
												console.log(res.data.data)
												// 绑定成功后将手机号存储到本地缓存
												var now = new Date().getTime();
												var expire = now + 30 * 24 * 3600 * 1000; // 设置缓存过期时间为30天
												uni.setStorageSync('userInfo', {
													value: res.data.data,
													expire: expire
												});
												that.userInfo = res.data.data;
												that.showType = true;
											} else {
												uni.removeStorageSync('userInfo');
												that.userInfo = null;
												that.showType = false;
												uni.$u.toast('获取失败')
											}
										}
									})
								}
							})
						}
					});
				}
			}
		}
	}
</script>

<style>
	page {
		background: #ffffff;
		color: #090909;
	}
</style>
<style scoped lang="less">
	.container {
		.info-box {
			border-bottom: 2px solid #000000;
			height: 350upx;
			margin: 20upx 0;
			padding-left: 20upx;
			display: flex;
			.avatar {
				margin: 0;
				padding: 0;
				background: none;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-right: 20upx;
				.userinfo{
					width:100upx;
					height: 100upx;
					border-radius: 50%;
					display:flex;
					overflow: hidden;
				}
			}
			.user-info {
				height: 80upx;
				display: flex;
				flex-direction: column;
				.username {
					margin-top: 34upx;
					margin-bottom: 14upx;
				}
				.tips-txt{
					font-size: 20upx;
				}
			}
		}

	}
	.info-box {
		border-bottom: 2px solid #000000;
		height: 550 upx;
		margin-top: 20rpx;
		margin: 20 upx 0;
		/*padding-left: 20 upx;*/
		/*display: flex;*/
	}
	.avatar {
		margin: 0;
		padding: 0;
		background: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-right: 20upx;
		.userinfo{
			width:200upx;
			height: 200upx;
			border-radius: 50%;
			display:flex;
			overflow: hidden;
		}
	}
	.user-info {
		height: 180upx;
		display: flex;
		flex-direction: column;
		.username {
			text-align: center;
			margin-top: 34upx;
			margin-bottom: 14upx;
		}
		.tips-txt{
			text-align: center;
			font-size: 20upx;
		}
	}

</style>
<style>
	.container2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.card-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.card {
		width: 200rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login-button {
		width: 90%;
		height: 90%;
		/*background-color: #000000;*/
		/*color: #ffffff;*/
		border: none;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>